<template>
  <!--模板-->
  <h1>测试 onWatcherCleanup </h1>
  person ： {{ person }}<br>
  <el-button type="" @click="add">增加 count </el-button>
  <son></son>
</template>


<script setup lang="ts" generic="T extends {name: string}">
  import { reactive, onWatcherCleanup, watch } from 'vue'
  import son from './cleanup-son.vue'
 
  const person = reactive({
    count: 0,
    name: 'jyk'
  })


  watch(person, () => {
    // 2、然后才会打印
    console.log('watch -- person', person)

    onWatcherCleanup(() => {
      // 1、先打印
      console.log('onWatcherCleanup -- person', person)
    })


  }) // ,{immediate: true}


  const add = () => {
    person.count++
  }


</script>